<template>
  <div style="height: 100%; " class="workspace">
    <el-container ref="listWarp" style="height: 100%;background-color:#fff;" v-if="isFlag">
      <div
        v-for="(item,index) in repairList"
        :key="index"
        style="border-bottom: 1px dashed #F1F1F1;margin-bottom: 10px;padding-bottom: 10px;"
      >
        <p style="margin-top: 0;cursor: pointer;" @click="detail(item)">
          <el-tag v-if="item.status==0" size="small" disable-transitions type="warning">待审核</el-tag>
          <el-tag v-if="item.status==1" size="small" disable-transitions type="warning">待受理</el-tag>
          <el-tag v-if="item.status==2" size="small" disable-transitions type="warning">待受理</el-tag>
          <el-tag v-if="item.status==3" size="small" disable-transitions type="info">待完工</el-tag>
          <el-tag
            v-if="item.status==4 && item.ifVisit==0"
            size="small"
            disable-transitions
            type="info"
          >待评价</el-tag>
          <el-tag
            v-if="item.status==4 && item.ifVisit==1"
            size="small"
            disable-transitions
            type="success"
          >已回访</el-tag>
          <el-tag v-if="item.status==5" size="small" disable-transitions type="warning">已驳回</el-tag>
          <span
            style="font-size:16px;
                font-family:Microsoft YaHei;
                font-weight:bold;
                color:rgba(51,51,51,1);margin-left:15px"
          >{{item.projectName}}</span>
        </p>
        <div
          style="font-size:14px;
        font-family:Microsoft YaHei;
        font-weight:400;
        color:rgba(101,101,101,1);cursor: pointer;  overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;"
          @click="detail(item)"
        >{{item.content}}</div>
        <div
          style="font-size:14px;
        font-family:Microsoft YaHei;
        font-weight:400;
        color:rgba(153,153,153,1);display: flex;"
        >
          <span style="margin-right: 25px;display: flex;align-items: center;">
            <img src="../../../assets/img/icon_ren.png" alt srcset />
            <span style="margin: 8px;">{{item.repairUserName}}</span>
          </span>
          <span style="margin-right: 25px;display: flex;align-items: center;">
            <img src="../../../assets/img/icon_time.png" alt srcset />
            <span style="margin: 8px;">{{item.createTime}}</span>
          </span>
          <span style="display: flex;align-items: center;">
            <img src="../../../assets/img/icon_location.png" alt srcset />
            <span style="margin: 8px;">{{item.areaName}}</span>
          </span>
        </div>
        <div v-if="item.resourcesVOS.length>0">
          <img
            style="width: 100px;height: 100px;object-fit: contain;margin-right:15px;cursor: pointer;border: 1px solid rgb(241, 241, 241);border-radius: 4px"
            v-for="(item,index) in item.resourcesVOS"
            :src="$itsoftUI.config.fileImgUrl+item.fileUrl"
            @click.prevent="privew(item)"
            :key="index"
            alt
            srcset
          />
        </div>
      </div>
      <el-footer style="height:50px;background-color:#fff;line-height: 30px;">
        <el-pagination
          style="padding-top:10px;background-color:#fff;text-align: center;"
          background
          layout="prev, pager, next,jumper,total,sizes"
          @size-change="evtPageSizeChange"
          @current-change="evtPageCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="[20, 50, 100, 500]"
          :total="totalRows"
          v-if="totalRows>0"
        ></el-pagination>
      </el-footer>
    </el-container>
    <repairDetail ref="detail" @shatDown="shatDown" v-else></repairDetail>
  </div>
</template>

<script>
import { myRepairApi } from "@/api/repair/myRepair";
import repairDetail from "@/views/home/meRepair/repairDetail";
export default {
  components: {
    repairDetail,
  },
  data() {
    return {
      currentPage: 1,
      totalRows: 0,
      pageSize: 20,
      repairList: [],
      isFlag: true,
    };
  },
  methods: {
    funLoadData() {
      myRepairApi.MyList(this.currentPage, this.pageSize).then((res) => {
        if (res.status == "success") {
          this.repairList = res.data.rows;
          this.totalRows = res.data.total;
        }
      });
    },
    //图片预览
    privew(item) {
      window.open(this.$itsoftUI.config.fileImgUrl + item.fileUrl, "_blank");
    },
    evtPageSizeChange(val) {
      //每页数量
      this.pageSize = val;
      this.funLoadData();
    },
    evtPageCurrentChange(val) {
      //分页
      this.currentPage = val;
      this.funLoadData();
    },
    shatDown() {
      this.isFlag = true;
    },
    detail(item) {
      this.isFlag = false;
      setTimeout(() => {
        this.funLoadDetail(item.id);
      }, 100);
    },
    //获取详情
    funLoadDetail(id) {
      myRepairApi.Get(id).then((res) => {
        if (res.status == "success") {
          this.$refs.detail.repairObj = res.data;
          this.$refs.detail.repairObj.logVOS.forEach((el) => {
            el.color = "#CDCDCD";
          });
          this.$refs.detail.repairObj.logVOS[0].color = "#f34c15";
        }
      });
    },
  },
  created() {
    this.funLoadData();
  },
};
</script>


<style lang="scss" scoped>
::v-deep .el-tag.el-tag--warning {
  background-color: #ffedec;
  color: #ff5242;
}
::v-deep .el-tag.el-tag--info {
  background-color: #fff4eb;
  color: #ff9539;
}
::v-deep .el-tag.el-tag--success {
  background-color: #e6f9f5;
  color: #0bc99d;
}
::v-deep .el-tag {
  border-width: 0;
}
</style>
